<template>
  <!--  <el-input v-if="auth === 'edit'" v-model="model" :class="wrapperClass"-->
  <!--            :placeholder="placeholder" @blur="fieldValueChange"/>-->
  <FUploader ref="refFUploader" v-if="auth === 'edit'"
             @attachmentChange="attachmentChange" style="width: 100%">
    <template #trigger>
      <div :class="wrapperClass">
        <el-button class="el-attach-input__wrapper"
                   round icon="attachment">{{ field.showName }}</el-button>
      </div>
    </template>
  </FUploader>

  <!--  <el-input v-else-if="auth === 'browse'" v-model="model" disabled-->
  <!--            @blur="fieldValueChange"/>-->

  <!--  <el-input v-else-if="auth === 'hide'" v-model="model" disabled-->
  <!--            type="password" @blur="fieldValueChange"/>-->

  <div style="width: 100%" v-else-if="auth === 'static' || auth === 'browse'">
    <FUploader ref="refFUploader" :enable="false"
               @attachmentChange="attachmentChange" style="width: 100%">
      <template #trigger>
        <div :class="wrapperClass">
        </div>
      </template>
      <template #file="{file}">
        <el-link @click="() => preview(file)" truncated>
          {{ file.name }}
        </el-link>
      </template>
    </FUploader>
  </div>
</template>
<script setup>
import {computed, defineProps, shallowRef, unref} from 'vue';
import {DefaultFieldDefinition} from '@/components/form/DefaultFormDefinition';
import {isEmpty, real} from '@/utils/CommonUtils';
import './textInput.css';
import FUploader from '@/components/FUploader/index.vue';

const props = defineProps({
  auth: {
    type: String,
    default: 'static'
  },
  notNull: {
    type: String,
    default: '0' //0表示非必填, 1表示必填
  },
  field: {
    type: Object,
    default() {
      return DefaultFieldDefinition;
    }
  }
});
const refFUploader = shallowRef();
const model = shallowRef();
const emits = defineEmits(['fieldValueChange']);
const historyNames = shallowRef();

function getFieldValue(rowData) {
  rowData[`${real(props.field).tableFieldName}_dictText`] = historyNames.value;
  return unref(model);
}

function resetField() {
  model.value = undefined;
}

function setFieldValue(value, obj) {
  model.value = value;
  historyNames.value = obj[`${real(props.field).tableFieldName}_dictText`]
  refFUploader.value.setData(real(value));
}

function fieldValueChange() {
  emits('fieldValueChange', props.field);
}

function preview(file) {
  refFUploader.value.handlePreview(file);
}

function getFieldValueText() {
  return unref(model);
}

function attachmentChange() {
  model.value = refFUploader.value.getAttachmentIds();
  historyNames.value = refFUploader.value.getAttachmentNames();
}

function getFieldValueWithCheck(rowData) {
  if (props.notNull + '' === '1' && isEmpty(model.value)) {
    throw new Error('请将必填项填写完整');
  }
  return model.value;
}

const placeholder = computed(() => {
  if (isEmpty(props.field.id)) return '';
  return `请输入${props.field.alias ? props.field.alias : props.field.showName}`;
});

const wrapperClass = computed(() => {
  return {
    notNull: props.notNull === '1' && isEmpty(model.value)
  };
});

defineExpose({
  getFieldValue,
  setFieldValue,
  resetField,
  getFieldValueText,
  getFieldValueWithCheck,
});
</script>
